﻿@using AiXiu.Model
@model TBUsers
@{
    ViewBag.Title = "PersonalEdit";
    string birthday=Model.Birthday.HasValue?Model.Birthday.Value.ToString("yyyy-M-dd"):"";
    List<Province> provinces = ViewBag.provinces as List<Province>;
    string province = "";
    string city = "";
    if (!string.IsNullOrEmpty(Model.Address))
    {
        province = Model.Address.Split(' ')[0];
        city = Model.Address.Split(' ')[1];
    }

}

<style>
    #BodyContent_hobby {
        width: 100%;
        padding: 0;
        padding-top: calc(var(--f7-input-height) * 0.2);
        padding-bottom: calc(var(--f7-input-height) * 0.2);
    }

    #hobby {
        padding-left: 0;
    }

        #hobby li {
            width: 48%;
            display: inline-block;
            line-height: calc(var(--f7-input-height) * 0.6);
        }
</style>
<div class="page" data-page="personaledit">
    <div class="page-content">
        <div class="block-title">编辑个人资料</div>
        <div class="list inline-labels no-hairlines-md">
            <input type="hidden" name="Id" value="@Model.Id" />
            <input type="hidden" name="Address" id="address"/>
            <input type="hidden" name="Hobby" id="hobby"/>
            <ul>
                <li>
                    <div class="item-content item-input">
                        <div class="item-inner">
                            <div class="item-title item-label">昵称</div>
                            <div class="item-input-wrap">
                                <input type="text" name="NickName" value="@Model.NickName" />
                                <span class="input-clear-button"></span>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content item-input">
                        <div class="item-inner">
                            <div class="item-title item-label">性别</div>
                            <div class="item-input-wrap input-dropdown-wrap">
                                <select name="Sex" id="sex">
                                    <option value="" selected>- 请选择 -</option>
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content item-input">
                        <div class="item-inner">
                            <div class="item-title item-label">生日</div>
                            <div class="item-input-wrap">
                                <input type="text" id="birthday" name="Birthday" value="@birthday" />
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title item-label">所在地</div>
                            <div class="item-input-wrap input-dropdown-wrap">
                                <div class="row">
                                    <div class="col-50">
                                        <select id="province">
                                            <option value="">- 请选择 -</option>
                                            @foreach (var v in provinces)
                                            {
                                                if (province == v.ProvinceName)
                                                {
                                                    <option value="@v.ProvinceName" selected>@v.ProvinceName</option>
                                                }
                                                else
                                                {
                                                    <option value="@v.ProvinceName">@v.ProvinceName</option>
                                                }
                                            }
                                        </select>
                                    </div>
                                    <div class="col-50">
                                        <select id="city">
                                            <option>- 请选择 -</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title item-label">爱好</div>
                            <div class="item-input-wrap input-dropdown-wrap">
                                <ul id="hobbyList">
                                    <li>
                                        <input type="checkbox" id="basketball" value="篮球">
                                        <label for="basketball">篮球</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" id="run" value="跑步">
                                        <label for="run">跑步</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" id="movie" value="看电影">
                                        <label for="movie">看电影</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" id="piano" value="钢琴">
                                        <label for="piano">钢琴</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" id="game" value="网络游戏">
                                        <label for="game">网络游戏</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" id="shopping" value="逛街购物">
                                        <label for="shopping">逛街购物</label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="block block-strong">
            <input id="btnProfile" type="submit" class="button button-fill button-large button-round" value="立即更新">
        </div>
    </div>
</div>
@section footScript{
    <script>
        var datePicker = app.picker.create({
            inputEl: '#birthday',
            toolbar: true,
            rotateEffect: true,
            toolbarCloseText: '确定',
            formatValue: function (values) {
                return values[0] + '-' + values[1] + '-' + values[2];
            },
            cols: [
                {
                    values: (function () {
                        var arr = [];
                        for (var i = 1950; i <= 2030; i++) { arr.push(i); }
                        return arr;
                    })(),
                },
                {
                    values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
                },
                {
                    values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
                }
            ],
            on: {
                change: function (picker, values) {
                    var daysInMonth = new Date(picker.value[0], picker.value[1], 0).getDate();
                    if (values[2] > daysInMonth) {
                        picker.cols[2].setValue(daysInMonth);
                    }
                }
            }
        })
        var today = new Date();
        var inputDate = document.getElementById('birthday').value;
        if (inputDate) {
            today = new Date(inputDate);
            datePicker.value = [
                today.getFullYear(),
                today.getMonth() + 1,
                today.getDate()
            ]
        }
    </script>
    <script>
        $(function () {
            $("#formMain").attr("action", "@Url.Action("SubmitEdit", "Personal")");
            $("#formMain").attr("method", "post");

            $("#sex").val("@Model.Sex");

            $("#formMain").validate({
                rules: {
                    NickName: {
                        required: true
                    },
                    Sex: {
                        required: true
                    }
                },

                messages: {
                    NickName: {
                        required: "昵称不能为空",
                    },
                    Sex: {
                        required: "请选择性别"
                    }
                },

                //提交表单
                submitHandler: function (form) {
                    //获取提交的地址信息
                    var address = "";
                    if ($("#province").val() != "") {
                        address = $("#province").val();
                    }
                    if ($("#city").val() != "") {
                        address+=" "+ $("#city").val();
                    }
                    $("#address").val(address);

                    //获取爱好
                    var hobby = [];
                    $("#hobbyList :checkbox:checked ").each(function () {
                        hobby.push($(this).val())
                    });
                    $("#hobby").val(hobby.join(" "));

                    //使用ajax方式提交表单
                    $(form).ajaxSubmit({
                        success: function (data) {
                            if (data.StatusCode == 0) {
                                location.href = "@Url.Action("Index","Personal")";
                            } else {
                                layer.msg(data.Message, { icon: 2 });
                            }
                        }
                    });
                }
            });

            if ($("#province").val() != "") {
                GetCity();
            }

            $("#province").change(function () {
                $("#city").find("option").remove();
                $("#city").append('<option value="">- 请选择 -</option>');
                GetCity();
            });

            function GetCity() {
                $.get("@Url.Action("GetCity", "Personal")", { provinceName: $("#province").val() }, function (data) {
                    data = $.parseJSON(data);
                    for (var n = 0; n < data.length; n++) {

                        if ("@city" == data[n].CityName) {
                            var option = " <option value=" + data[n].CityName + " selected>" + data[n].CityName + "</option>"
                        } else {
                            var option = " <option value=" + data[n].CityName + ">" + data[n].CityName + "</option>"
                        }

                        $("#city").append(option);
                    }
                })
            }

            $("#hobbyList :checkbox ").each(function () {
                var val = $(this).val();
                if ("@Model.Hobby".indexOf(val)>=0) {
                    $(this).prop("checked", true);
                }
            });
        });
    </script>
}

